<template>
	<!-- 知识应用卡片主容器 -->
	<view class="knowledge-app-container">
		<!-- 背景渐变装饰层 -->
		<view class="background-gradient"></view>
		<!-- 返回上一页按钮 - 固定在左上角 -->
		<view class="back-button" @click="handleBack" :style="{ 'marginTop': uni.getWindowInfo().safeAreaInsets.top + 'px' }">
			<uni-icons type="left" size="20" color="#333"></uni-icons>
		</view>
		<!-- 知识卡片滑动容器 - 使用swiper实现垂直滑动 -->
		<swiper class="knowledge-swiper-container" vertical :current="currentKnowledgeIndex"
			@change="handleKnowledgeSwiperChange" circular>
			<swiper-item v-for="(knowledge, index) in knowledgeData" :key="index" class="knowledge-swiper-item">
				<!-- 整个区域 -->
				<view class="knowledge-card-item" :class="{ active: currentKnowledgeIndex === index }">
					<!-- 上部分：标题区域 -->
					<view class="card-title-section"
						:style="{ 'marginTop': uni.getWindowInfo().safeAreaInsets.top + 'px' }">
						<view class="title-container">
							<text class="title-text">{{ knowledge.title }}</text>
						</view>
					</view>

					<!-- 方法步骤区域 -->
					<scroll-view class="method-steps-section" scroll-y>
						<view class="method-title">
							<text class="title-icon">📝</text>
							方法步骤
						</view>
						<view class="method-list">
							<view class="method-item" v-for="(method, idx) in knowledge.methods" :key="idx">
								<text class="method-number">{{ idx + 1 }}.</text>
								<text class="method-text">{{ method }}</text>
							</view>
						</view>
					</scroll-view>

					<!-- 实际使用示例区域 - 左右滑动切换不同案例 -->
					<view class="example-usage-section">
						<view class="example-header">
							<text class="header-icon">💡</text>
							实际使用示例
						</view>
						<swiper class="example-swiper" :current="currentExampleIndex" indicator-dots
							indicator-color="rgba(67, 147, 226, 0.3)" indicator-active-color="#4393e2" circular
							@change="handleExampleSwiperChange">
							<swiper-item v-for="(example, idx) in knowledge.examples" :key="idx"
								class="example-swiper-item">
								<view class="example-content">
									<view class="example-scenario">场景{{ idx + 1 }}：{{ example.scenario }}</view>
									<view class="example-description">
										{{ example.description }}
									</view>
									<view class="example-tips" v-if="example.tips">
										{{ example.tips }}
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>

					<!-- 右侧：互动按钮区域 -->
					<view class="interaction-buttons">
						<view class="interaction-button like-button" @click="handleKnowledgeLike(knowledge)">
							<uni-icons type='heart' size="24" :color="getLikeIconColor(knowledge)"></uni-icons>
							<text>{{ knowledge.likeCount }}</text>
						</view>
						<view class="interaction-button comment-button">
							<uni-icons type='chat' size="24"></uni-icons>
						</view>
						<view class="interaction-button share-button" @click="handleKnowledgeShare(knowledge)">
							<uni-icons type='redo' size="24"></uni-icons>
							<text>分享</text>
						</view>
						<view class="interaction-button save-button">
							<uni-icons type='download' size="24"></uni-icons>
							<text>收藏</text>
						</view>
					</view>

					<!-- 滑动提示 -->
					<view class="swipe-hint-indicator" v-if="0 === currentKnowledgeIndex">
						<text>上滑查看更多知识卡片</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	// 导入社区服务接口
	import { likeReviewAPI, pageReviewsAPI, unLikeReviewAPI } from '@/services/review';
	// 导入通用分页查询方法
	import { commonPageQueryData } from '@/services/global';

	/**
	 * 知识数据列表类型定义
	 * 定义知识卡片的数据结构
	 */
	interface KnowledgeData {
		title: string; // 知识卡片标题
		methods: string[]; // 方法步骤列表
		examples: Array<{ // 使用示例列表
			scenario: string; // 应用场景
			description: string; // 详细描述
			tips?: string; // 提示信息
		}>;
		isLiked?: boolean; // 是否已点赞
		likeCount?: number; // 点赞数量
	}

	/**
	 * 知识数据列表
	 * 存储当前显示的所有知识卡片数据
	 */
	const knowledgeData = ref<KnowledgeData[]>([
		{
			title: '如何控制愤怒情绪？',
			methods: [
				'深呼吸法 - 进行5次深长的呼吸',
				'暂停法 - 离开现场，给自己冷静时间',
				'认知重评 - 重新评估引发愤怒的原因',
				'表达需求 - 用"我"语句表达感受'
			],
			examples: [
				{
					scenario: '家庭场景',
					description: '家人未按时做家务时，不要说"你总是这么懒"，而是说："当我看到家务没完成时，我感到压力很大，我们需要一起制定一个计划。"',
					tips: '使用"我"语句表达感受，而不是用"你"语句指责对方，可以减少对方的防御心理，促进建设性对话。沟通专家指出，这种表达方式可以将家庭冲突解决的成功率提高65%。'
				},
				{
					scenario: '职场场景',
					description: '同事对你的工作提出批评时，先深呼吸几次，然后说："我理解你的关注点，我会考虑你的建议并改进。"',
					tips: '在职场中保持冷静和专业的态度，能帮助你建立更好的职业形象和人际关系。'
				}
			],
			isLiked: false,
			likeCount: 128
		},
		{
			title: '如何提高记忆力？',
			methods: [
				'间隔重复法 - 定期复习信息以加强记忆',
				'联想记忆法 - 将新信息与已知信息关联',
				'视觉化 - 将信息转化为生动的心理图像',
				'多感官学习 - 同时使用视觉、听觉和触觉'
			],
			examples: [
				{
					scenario: '学习场景',
					description: '背诵英语单词时，可以创建单词卡片，第一天学习后，第二天、第四天、第七天各复习一次。同时，可以将单词与图像或故事联系起来。',
					tips: '研究表明，间隔重复法比集中学习更有效，能将记忆保持率提高70%以上。结合多种感官的学习方法可以激活大脑的多个区域。'
				},
				{
					scenario: '工作场景',
					description: '记住客户信息时，可以将客户的名字、公司和特点与一个有趣的故事或图像联系起来，每次见到客户前快速回顾。',
					tips: '关联记忆法能帮助你在短时间内记住大量信息，并在需要时快速提取。'
				}
			],
			isLiked: true,
			likeCount: 256
		},
		{
			title: '如何有效克服拖延症？',
			methods: [
				'5分钟法则 - 先做5分钟，往往能继续下去',
				'任务分解 - 将大任务拆分成小的可管理部分',
				'番茄工作法 - 25分钟专注工作，5分钟休息',
				'消除干扰 - 关闭手机通知，创建专注环境'
			],
			examples: [
				{
					scenario: '工作场景',
					description: '面对一份重要报告时，不要想着一次性完成，而是先设定只写5分钟的目标。然后将报告分解为收集资料、撰写大纲、填充内容、修改完善等小步骤。',
					tips: '心理学研究发现，启动任务往往是克服拖延的最大障碍。5分钟法则能帮助我们突破心理阻力，进入工作状态。'
				},
				{
					scenario: '学习场景',
					description: '准备考试时，可以使用番茄工作法，25分钟专注复习一个知识点，然后休息5分钟。将复习内容分解为多个小专题，每个专题设置明确的完成标准。',
					tips: '番茄工作法结合了时间管理和注意力科学，可以显著提高学习效率。'
				}
			],
			isLiked: false,
			likeCount: 189
		},
		{
			title: '如何提高沟通能力？',
			methods: [
				'积极倾听 - 专注于对方，不打断，不急于回应',
				'非语言沟通 - 注意肢体语言和面部表情',
				'清晰表达 - 使用简单明了的语言',
				'同理心 - 尝试从对方的角度理解问题'
			],
			examples: [
				{
					scenario: '职场场景',
					description: '在团队会议中，当同事提出不同意见时，不要立即反驳，而是先认真倾听，然后说："我理解你的观点，这很有价值。我的看法是..."',
					tips: '研究表明，积极倾听可以减少沟通中的误解和冲突，提高团队合作效率。沟通专家建议，在对话中，倾听的时间应占60-70%。'
				},
				{
					scenario: '社交场景',
					description: '与朋友聊天时，保持眼神交流，点头表示理解，避免频繁查看手机。当朋友分享困扰时，可以说："听起来你最近压力很大，能告诉我更多吗？"',
					tips: '良好的社交沟通能力能帮助你建立更深层次的人际关系，增强社交满足感。'
				}
			],
			isLiked: true,
			likeCount: 324
		},
		{
			title: '如何缓解焦虑情绪？',
			methods: [
				'正念呼吸 - 专注于呼吸，观察thoughts而不评判',
				'渐进式肌肉放松 - 从脚到头依次放松肌肉',
				'认知重构 - 识别并挑战负面思维模式',
				'行动解决 - 针对引发焦虑的问题采取实际行动'
			],
			examples: [
				{
					scenario: '考试焦虑',
					description: '考试前感到焦虑时，可以先进行5分钟的正念呼吸练习，然后列出自己已经复习的内容，挑战"我什么都记不住"的负面想法。',
					tips: '临床心理学研究证实，正念呼吸可以在短短几分钟内降低焦虑水平。认知重构技术能帮助我们打破"灾难化思维"模式。'
				},
				{
					scenario: '工作压力',
					description: '面对工作截止日期的压力时，可以先进行10分钟的渐进式肌肉放松练习，然后将任务分解为具体的小步骤，按照优先级逐一完成。',
					tips: '身体放松能帮助缓解心理压力，任务分解能让大问题变得可管理，增强掌控感。'
				}
			],
			isLiked: false,
			likeCount: 217
		}
	]);

	/**
	 * 当前显示的知识卡片索引
	 * 控制swiper组件显示第几个知识卡片
	 */
	const currentKnowledgeIndex = ref<number>(0);

	/**
	 * 当前显示的示例案例索引
	 * 控制示例swiper组件显示第几个案例
	 */
	const currentExampleIndex = ref<number>(0);

	/**
	 * 是否加载完成
	 */
	const isLoadComplete = ref<boolean>(false);

	/**
	 * 是否正在加载
	 */
	const isLoadingData = ref<boolean>(false);

	/**
	 * 分页参数
	 */
	const pageParams = {
		current: 1,
		size: 2
	};

	/**
	 * 查询参数
	 */
	const queryParams = ref({});

	/**
	 * 滑动状态标志
	 * 防止一次滑动触发多次切换
	 */
	const isSwipingState = ref<boolean>(false);

	/**
	 * 处理知识卡片分享
	 * @param knowledge 要分享的知识卡片对象
	 */
	const handleKnowledgeShare = (knowledge: KnowledgeData) => {
		uni.navigateTo({ url: '/pages/community/fenxiang/index' });
	};

	/**
	 * 滑动到最后一个swiper时加载更多数据
	 * 替代原来的watch监听器
	 */
	const checkAndLoadMoreData = () => {
		// 确保knowledgeData数组有数据，并且当前索引是最后一个元素的索引，并且没有在加载中，并且没有加载完成
		if (knowledgeData.value.length > 0 && currentKnowledgeIndex.value === knowledgeData.value.length - 1 && !isLoadingData.value && !isLoadComplete.value) {
			console.log('滑动到最后一个swiper，开始加载更多知识数据');
			// 由于是假数据，这里可以添加更多的假数据或者标记为加载完成
			isLoadComplete.value = true;
		}
	};

	/**
	 * 知识卡片swiper切换事件处理函数
	 * @param e - swiper组件的切换事件对象
	 * 处理知识卡片切换逻辑
	 */
	const handleKnowledgeSwiperChange = (e: any) => {
		console.log("handleKnowledgeSwiperChange", e);
		if (!isSwipingState.value) {
			currentKnowledgeIndex.value = e.detail.current;
			// 切换知识卡片时，重置示例索引为0
			currentExampleIndex.value = 0;
			// 切换后检查是否需要加载更多数据
			checkAndLoadMoreData();
		}
	};

	/**
	 * 示例swiper切换事件处理函数
	 * @param e - swiper组件的切换事件对象
	 * 处理示例案例切换逻辑
	 */
	const handleExampleSwiperChange = (e: any) => {
		currentExampleIndex.value = e.detail.current;
	};

	/**
	 * 手动切换示例案例
	 * @param index 要切换到的示例索引
	 */
	const switchExample = (index: number) => {
		currentExampleIndex.value = index;
	};

	/**
	 * 加载知识数据的包装方法
	 * 调用后端pageReviewsAPI接口获取知识数据
	 * @returns Promise<void>
	 */
	const loadKnowledgeData = async () => {
		// 由于使用假数据，这里可以省略API调用
		// 实际项目中可以调用后端接口获取数据
		// await commonPageQueryData(
		// 	pageReviewsAPI,
		// 	knowledgeData,
		// 	isLoadComplete,
		// 	isLoadingData,
		// 	pageParams,
		// 	queryParams
		// );
	};

	/**
	 * 获取点赞图标颜色
	 * @param item 知识卡片项
	 * @returns 点赞图标颜色
	 */
	const getLikeIconColor = (item: KnowledgeData) => {
		return item.isLiked ? '#f00' : '#999';
	};

	/**
	 * 处理知识卡片点赞的包装方法
	 * 调用后端likeReviewAPI或unLikeReviewAPI接口
	 * @param knowledge 要点赞的知识卡片对象
	 * @returns Promise<void>
	 */
	const handleKnowledgeLike = async (knowledge: KnowledgeData) => {
		try {
			// 模拟API调用
			// if (knowledge.isLiked) {
			// 	// 取消点赞
			// 	await unLikeReviewAPI(knowledge);
			// } else {
			// 	// 点赞
			// 	await likeReviewAPI(knowledge);
			// }
			// 更新本地数据
			knowledge.isLiked = !knowledge.isLiked;
			knowledge.likeCount = knowledge.isLiked ? (knowledge.likeCount || 0) + 1 : (knowledge.likeCount || 0) - 1;
		} catch (error) {
			console.error('点赞操作失败:', error);
		}
	};

	/**
	 * 页面加载时执行的生命周期函数
	 */
	onLoad(async () => {
		try {
			// 初始加载数据
			await loadKnowledgeData();
		} catch (error) {
			console.error('初始化加载失败:', error);
		}
	});

	/**
	 * 处理返回按钮点击事件
	 * 返回到上一页
	 */
	const handleBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	// 全局样式变量定义
	$primary-color: #4393e2; // 主色调：蓝色
	$secondary-color: #ff6b6b; // 次要色调：红色
	$accent-color: #4ecdc4; // 强调色：青色
	$text-primary: #333; // 主要文字颜色
	$text-secondary: #666; // 次要文字颜色
	$border-radius: 12px; // 统一圆角值
	$border-color: #4393e2; // 边框颜色
	$font-size-large: 18px;
	$font-size-medium: 16px;
	$font-size-normal: 14px;
	$font-size-small: 12px;
	$spacing-sm: 8px;
	$spacing-md: 12px;
	$spacing-lg: 16px;

	/**
	 * 知识应用卡片页面主容器样式
	 */
	.knowledge-app-container {
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
	}

	/**
	 * 背景渐变样式
	 */
	.background-gradient {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		z-index: -1;
	}

	/**
	 * 返回按钮样式 - 固定在左上角
	 */
	.back-button {
		position: fixed;
		top: env(safe-area-inset-top, 16px);
		left: 16px;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		z-index: 9999;
		transition: all 0.3s ease;
	}

	.back-button:active {
		transform: scale(0.95);
		background-color: rgba(245, 245, 245, 0.9);
	}

	/**
	 * 知识卡片swiper容器样式
	 */
	.knowledge-swiper-container {
		height: 100%;
		width: 100%;
	}

	.knowledge-swiper-item {
		height: 100%;
		width: 100%;
	}

	/**
	 * 知识卡片项样式
	 */
	.knowledge-card-item {
		height: 100%;
		width: 100%;
		overflow: hidden;
		transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		box-sizing: border-box;
		padding: 10px;
		position: relative;

		// 卡片激活状态样式
		&.active {
			transform: scale(1.02);
		}
	}

	/**
	 * 卡片标题区域样式
	 */
	.card-title-section {
		flex: 1;
		font-size: $font-size-large;
		font-weight: bold;
		color: $text-primary;
	}

	/**
	 * 标题容器样式 - 确保标题居中显示
	 */
	.title-container {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/**
	 * 标题文本样式
	 */
	.title-text {
		flex: 1;
		font-size: $font-size-large;
		font-weight: bold;
		color: $text-primary;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/**
	 * 方法步骤区域样式
	 */
	.method-steps-section {
		flex: 6;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px solid rgba(67, 147, 226, 0.3);

		overflow: hidden;

		background: rgba(255, 255, 255, 0.95);
		color: $text-primary;
		border-radius: $border-radius;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		padding: 15px;

		// 方法标题样式
		.method-title {
			font-size: $font-size-medium;
			font-weight: bold;
			color: $text-primary;
			margin-bottom: $spacing-lg;
			display: flex;
			align-items: center;
			gap: 8px;

			// 标题图标样式
			.title-icon {
				font-size: 20px;
			}
		}

		// 方法列表样式
		.method-list {
			display: flex;
			flex-direction: column;
			gap: $spacing-md;
			width: 100%;

			// 方法项样式
			.method-item {
				display: flex;
				align-items: flex-start;
				padding: $spacing-md;
				background: linear-gradient(135deg, rgba(240, 248, 255, 0.8) 0%, rgba(240, 248, 255, 0.4) 100%);
				border-radius: $border-radius;
				transition: all 0.3s ease;
				border-left: 3px solid transparent;

				// 方法项激活状态样式
				&:active {
					background: linear-gradient(135deg, rgba(240, 248, 255, 1) 0%, rgba(240, 248, 255, 0.6) 100%);
					border-left: 3px solid $primary-color;
				}

				// 方法序号样式
				.method-number {
					font-weight: bold;
					color: $primary-color;
					margin-right: 5px;
					min-width: 20px;
				}

				// 方法文本样式
				.method-text {
					flex: 1;
					font-size: $font-size-normal;
					color: $text-primary;
					line-height: 1.6;
					text-align: left;
				}
			}
		}
	}

	/**
	 * 实际使用示例区域样式
	 */
	.example-usage-section {
		flex: 6;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: flex-start;
		width: 100%;

		overflow: hidden;

		background: rgba(255, 255, 255, 0.95);
		color: $text-primary;
		margin-bottom: 20px;
		box-sizing: border-box;
		padding: 15px;
		border-radius: $border-radius;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(67, 147, 226, 0.3);

		// 示例头部样式
		.example-header {
			font-size: $font-size-medium;
			font-weight: bold;
			color: $text-primary;
			margin-bottom: 15px;
			display: flex;
			align-items: center;
			gap: 8px;

			// 头部图标样式
			.header-icon {
				font-size: 20px;
			}
		}

		// 示例swiper样式
		.example-swiper {
			width: 100%;
			height: calc(100% - 40px);
			display: flex;
			overflow: hidden;

			.example-swiper-item {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				overflow: hidden;
				width: 100%;

				// 示例内容样式
				.example-content {
					display: flex;
					flex-direction: column;
					gap: $spacing-md;
					width: 100%;
					height: 100%;

					// 示例场景样式
					.example-scenario {
						font-weight: bold;
						color: $primary-color;
						font-size: $font-size-normal;
						background: linear-gradient(135deg, rgba(67, 147, 226, 0.1) 0%, rgba(67, 147, 226, 0.05) 100%);
						padding: 8px 12px;
						border-radius: $border-radius;
						border-left: 3px solid $primary-color;
					}

					// 示例描述样式 - 添加自动换行防止溢出
					.example-description {
						font-size: $font-size-normal;
						color: $text-primary;
						line-height: 1.6;
						padding: $spacing-md;
						background: linear-gradient(135deg, rgba(240, 248, 255, 0.8) 0%, rgba(240, 248, 255, 0.4) 100%);
						border-radius: $border-radius;
						word-wrap: break-word;
						word-break: break-all;
						white-space: normal;
						border: 1px solid rgba(240, 248, 255, 0.8);
					}

					// 示例提示样式 - 添加自动换行防止溢出
					.example-tips {
						font-size: $font-size-normal;
						color: $text-secondary;
						line-height: 1.6;
						font-style: italic;
						padding: $spacing-md;
						background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(248, 249, 250, 0.4) 100%);
						border-radius: $border-radius;
						word-wrap: break-word;
						word-break: break-all;
						white-space: normal;
						border-left: 3px solid $accent-color;
					}
				}
			}
		}
	}

	/**
	 * 互动按钮区域样式
	 */
	.interaction-buttons {
		position: fixed;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		z-index: 10;
		padding: 15px 10px;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: $border-radius;

		// 互动按钮基础样式
		.interaction-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			padding: 10px 8px;
			margin: 10px 0;
			border-radius: 50px;

			// 互动按钮激活状态样式
			&:active {
				background-color: rgba(0, 0, 0, 0.05);
			}

			// 互动按钮选中状态样式
			&.active {
				// 互动按钮选中状态图标样式
				uni-icons {
					color: $secondary-color;
				}

				// 互动按钮选中状态文本样式
				text {
					color: $secondary-color;
				}
			}

			// 互动按钮图标样式
			uni-icons {
				font-size: 24px;
				margin-bottom: 3px;
				color: $text-primary;
				transition: color 0.3s ease;
			}

			// 互动按钮文本样式
			text {
				font-size: $font-size-small;
				font-weight: 500;
				white-space: nowrap;
				color: $text-primary;
				transition: color 0.3s ease;
			}

			// 点赞按钮动画效果
			&.like-button {
				animation: pulse 2s infinite;
			}
		}
	}

	/**
	 * 点赞按钮脉冲动画
	 */
	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	/**
	 * 滑动提示指示器样式
	 */
	.swipe-hint-indicator {
		position: absolute;
		bottom: 80px;
		left: 50%;
		transform: translateX(-50%);
		color: $text-primary;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.95) 100%);
		padding: 10px 20px;
		border-radius: 30px;
		font-size: $font-size-normal;
		font-weight: 500;
		animation: bounce 2s infinite;
		z-index: 3;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.5);
	}

	/**
	 * 弹跳动画效果定义
	 */
	@keyframes bounce {

		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0) translateX(-50%);
		}

		40% {
			transform: translateY(-10px) translateX(-50%);
		}

		60% {
			transform: translateY(-5px) translateX(-50%);
		}
	}
</style>